<template>
  <!-- lazy  -->
  <div>
    <el-table v-loading="menuload" :data="menuList" style="width: 100%" row-key="id" border
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" :expand-row-keys="expandKeys">
      <el-table-column prop="name" label="名称" width="180">

      </el-table-column>
      <el-table-column prop="code" label="权限值" width="180">
      </el-table-column>
      <el-table-column prop="toCode" label="跳转权限值">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{$index, row}">
          <el-button type="primary" icon="el-icon-plus" size="mini" :disabled="row.level == 4"
            @click="addMenu(row)"></el-button>
          <el-button type="primary" icon="el-icon-edit" size="mini" :disabled="row.level == 1"
            @click="editMenu(row)"></el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="row.level == 1"
            @click="deleteRole(row)"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="`添加一级菜单`" :visible.sync="dialogFormVisible">
      <el-form :model="menuForm" label-width="120px" :rules="rules" ref="permission">
        <el-form-item label="父级名称" v-if="menuForm.level > 2 && !menuForm.id">
          <el-input :value="menuForm.pName" disabled></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="menuForm.name"></el-input>
        </el-form-item>
        <el-form-item label="功能权限值" prop="code">
          <el-input v-model="menuForm.code"></el-input>
        </el-form-item>
        <el-form-item label="跳转路由权限值" prop="toCode" v-if="menuForm.level == 4">
          <el-input v-model="menuForm.toCode"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelRole">取 消</el-button>
        <el-button type="primary" @click="saveRole">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 
    <el-button type="primary" v-show="$store.state.user.buttons.indexOf('btn.Permission.add') != -1">添加</el-button>
    <el-button type="primary" v-show="$store.state.user.buttons.indexOf('btn.Permission.update') != -1">修改</el-button>
    <el-button type="primary" v-show="$store.state.user.buttons.indexOf('btn.Permission.remove') != -1">删除</el-button> -->
  </div>

</template>

<script>
export default {
  name: 'Permission',
  data() {
    return {
      menuList: [], // 菜单列表
      menuload: false,
      menuForm: {
        name: '',
        level: 0,
        code: '',
        toCode: ''
      },
      dialogFormVisible: false,
      rules: {
        name: [
          { required: true, message: '名称不能为空' }
        ],
        code: [
          { required: true, message: '权限值必须输入' }
        ]
      },
      expandKeys: [], // 需要自动展开的项
    }
  },
  mounted() {
    this.getData()
  },
  computed: {
    dialogTitle() {
      const { id, level } = this.menuForm
      if (id) {
        return level === 4 ? '修改功能' : '修改菜单'
      } else {
        return level === 4 ? '添加功能' : `添加${level === 2 ? '一级' : '二级'}菜单`
      }
    }
  },
  methods: {
    // 读取菜单全部数据
    async getData() {
      this.menuload = true
      let res = await this.$API.permission.reqGetPermission()
      if (res.code == 20000) {
        this.menuList = res.data.children
        this.menuload = false
        this.expandKeys = [this.menuList[0].id]
      }
    },
    // 点击添加菜单按钮
    addMenu(menu) {
      this.menuForm.pid = menu.id
      this.menuForm.level = menu.level - 0 + 1
      this.menuForm.type = menu.level == 4 ? 2 : 1
      this.menuForm.pName = menu.name
      this.dialogFormVisible = true
      this.$nextTick(() => this.$refs.permission.clearValidate())
    },

    // 保存
    saveRole() {
      this.$refs.permission.validate(async (valid) => {
        if (valid) {
          let res;
          if (this.menuForm.id) {
            res = await this.$API.permission.reqUpdateMenu(this.menuForm)
          } else {
            res = await this.$API.permission.reqSaveMenu(this.menuForm)
          }
          if (res.code == 20000) {
            this.$message({ type: 'success', message: this.menuForm.id ? '修改成功' : '保存成功' })
            this.getData()
          }
          this.resetData()
        }
      });
    },
    // 编辑
    editMenu(row) {
      this.menuForm = { ...row }
      this.dialogFormVisible = true
      this.menuForm.type = this.menuForm.level === 4 ? 2 : 1
      // 清除校验(必须在界面更新之后)
      this.$nextTick(() => this.$refs.permission.clearValidate())
    },
    resetData() {
      this.dialogFormVisible = false
      this.menuForm = {
        level: 0,
        name: '',
        code: '',
        toCode: ''
      }
    },
    cancelRole() {
      this.dialogFormVisible = false
      this.resetData()
    },
    deleteRole(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await this.$API.permission.deleteMenu(row.id)
        if (res.code == 20000) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        } else {
          this.$message({
            type: 'danger',
            message: '删除失败'
          });
        }
        this.getData()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }

}
</script>

<style></style>